<template>
	<view class="resultTask">
		<uni-nav-bar
			color="#ffffff"
			background-color="#00aded"
			:statusBar="true"
			title="采样作业"
			fixed="true"
			left-icon="left"
			left-text="返回"
			@clickLeft="back"
			@clickRight="arrow"
			right-text="实绩"
			right-icon="right"
		></uni-nav-bar>
		<view class="resultTask_top" v-if="transOrderId == null">
			<uni-section title="点击图形开始扫描" type="line" titleFontSize="20px">
				<uni-icons type="scan" size="80" @click="onScan"></uni-icons>
			</uni-section>
			<view class="" style="margin-top: 10rpx; margin-bottom: 10rpx"></view>
			<uni-section title="待采运单" type="line" title-font-size="20px">
				<dil-search :columnData="options.columnDataList" @onSearch="onSearch" v-if="options.columnDataList.length > 0"></dil-search>
				<dil-card class="dilCard" @emitEvent="emitEvent" v-bind.sync="options"></dil-card>
			</uni-section>
		</view>
		<view class="resultTask_main" v-show="transOrderId != null">
			<uni-section title="运单信息" type="line" titleFontSize="20px">
				<template v-slot:right>
					<view @click="cancelMask" style="font-weight: 500; font-size: 16px; color: red">
						<text>取消采样</text>
					</view>
				</template>
				<dil-card class="dilCard" :columnData="columnData" :dataList="dataList"></dil-card>
			</uni-section>
		</view>
		<view class="resultTask_middle" v-if="transOrderId != null">
			<uni-section title="采样信息" type="line" titleFontSize="20px">
				<uni-card margin="10rpx" padding="4rpx">
					<dil-Form :formId="538" v-model="formValue" labelPosition="left" ref="form"></dil-Form>
					<button type="primary" class="button" @click="onclickConfirm">采样确认</button>
				</uni-card>
			</uni-section>
		</view>
		<view class="resultTask_floot" v-if="transOrderId != null">
			<uni-section title="运单实绩" type="line" titleFontSize="20px">
				<dil-step :stepsList="stepList"></dil-step>
			</uni-section>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			stepList: [],
			addressMap: {},
			resultStartTime: null,
			formValue: {},
			options: {
				requestUrl: '/api/v1/tms/getTransOrderList?apiId=627',
				requestQuery: {},
				cardSlotList: [
					{
						label: '采样',
						icon: 'wlIcon-zhuangcherenwu',
						emitEvent: 'excuteMake'
					}
				],
				columnDataList: [],
				totalNum: 0,
				rowDataList: []
			},
			transOrderNumber: null
		};
	},
	onShow() {
		uni.$emit('onShow', 1);

		//获取定位
		this.Tool.getAddress({ loading: false }, (data) => {
			this.addressMap = data;
			this.formValue.loadActualAddress = this.addressMap.address;
			this.formValue = { ...this.addressMap, ...this.formValue };
		});
		// 以点进来的时间作为开始时间;
		this.resultStartTime = new Date().getTime();
		this.getOrderSection();
	},
	watch: {
		transOrderId(val) {
			if (val) {
				this.getTransResult();
			}
		}
	},
	computed: {
		transOrderId: {
			get() {
				if (this.options.rowDataList.length == 1) {
					return this.options.rowDataList[0].transOrderId;
				} else {
					return null;
				}
			},
			set(val) {}
		}
	},
	mounted() {
		this.getOrderSectionDebounce = this.Tool.debounce((data) => {
			this.getOrderSection(data);
		}, 500);
	},
	methods: {
		cancelMask() {
			this.transOrderId = null;
			this.transOrderNumber = null;
			this.getOrderSection();
		},
		arrow() {
			uni.navigateTo({
				url: '/pages/transExecute/samplingResult'
			});
		},
		onSearchOrder(item) {
			this.getOrderSectionDebounce(item);
		},
		back() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		async getOrderSection(data = {}) {
			data.deleted = 5;
			data.resultTaskType = '采样';
			data.workFlag = '采样';
			this.options.requestQuery = { ...data };
		},
		async getTransResult(data = {}) {
			let transOrderId = this.transOrderId;
			let transOrderNumber = this.transOrderNumber;
			const res = await this.$myRequest({
				url: '/api/v1/tms/getTransResult',
				data: { transOrderId: transOrderId, transOrderNumber: transOrderNumber }
			});
			if (res.data.data.length > 0) {
				this.stepList = res.data.data;
			}
		},
		emitEvent(eventName, cardItem) {
			this[eventName](cardItem);
		},
		excuteMake(item) {
			this.transOrderId = item.transOrderId;
			this.transOrderNumber = item.transOrderNumber;
			this.getOrderSection({
				transOrderId: item.transOrderId,
				transOrderNumber: item.transOrderNumber
			});
		},
		//扫描事件
		onScan() {
			let that = this;
			that.$commonScan((data) => {
				console.log('data: ', data);
				let scanResult = data.scanResult;
				if (!scanResult.includes('YSDD') && scanResult.length != '20') {
					uni.showToast({
						title: '识别信息不符合规则,请重试',
						icon: 'none',
						duration: 2000
					});
				} else {
					that.transOrderNumber = scanResult;
					that.getOrderSection({
						transOrderNumber: that.transOrderNumber
					});
				}
			});
		},
		//确认事件
		onclickConfirm() {
			let that = this;
			this.$refs['form'].validateForm((data) => {
				if (data.flag) {
					uni.showModal({
						cancelText: '取消',
						confirmText: '确认',
						title: '提示',
						content: '确定是否采样完成',
						success: (res) => {
							if (res.confirm) {
								that.confirmExecute();
							} else if (res.cancel) {
								uni.showToast({
									title: '用户取消操作！',
									icon: 'none',
									duration: 3000
								});
							}
						}
					});
				}
			});
		},
		confirmExecute() {
			let data = this.formValue;
			data.transOrderChildId = this.options.rowDataList[0].transOrderChildId;
			data.transOrderNumber = this.options.rowDataList[0].transOrderNumber;
			//首先看哪些列需要传图片ssss
			this.Tool.uploadFile(data, ['resultImage'], async (response) => {
				const res = await this.$myRequest({
					url: '/api/v1/tms/syncQualityResult',
					data: response
				}).catch((err) => {
					uni.showToast({
						duration: 2000,
						title: err,
						icon: 'error'
					});
				});
				if (res.data.status == 'succeed') {
					uni.showToast({
						title: res.data.message,
						duration: 2000,
						icon: 'success'
					});
					setTimeout(() => {
						this.cancelMask();
					}, 2000);
				} else {
					uni.showToast({
						title: res.data.message,
						duration: 2000,
						icon: 'success'
					});
				}
			});
		}

		//vuex
	}
};
</script>

<style lang="scss" scoped>
.resultTask {
	width: 100vw;
	height: 100%;
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	/deep/ .segmentControl {
		// flex: auto !important;
		margin-top: 1rpx;
		.segmented-control__item--button {
			border-style: none;
			border-top-width: 0px;
			border-bottom-width: 0px;
			border-right-width: 0px;
			border-left-width: 0;
		}
		.segmented-control__item--button--first {
			border-left-width: 0px;
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
		}
		.segmented-control__item--button--last {
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
		}
	}
	&_top {
		width: 100vw;
		height: 100%;
		.uni-section {
			width: 100vw;
			/deep/.uni-section-content {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.noTip {
					width: 100vw;
					height: 10vh;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 700;
					font-size: 40rpx;
					color: #000;
				}
			}
		}
	}
	.resultTask_top_result {
		margin-top: 20rpx;
		.scroll-Y {
			height: 90vh;
		}
	}
	&_main {
		margin-top: 20rpx;
	}
	&_middle {
		margin-top: 20rpx;
		.uni-section {
			width: 100vw;
			/deep/.uni-section-content {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			/deep/.uni-card {
				border-radius: 40rpx;
				.button {
					border-radius: 40rpx;
				}
			}
		}
	}
	&_floot {
		width: 100vw;
		background-color: #fff;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}
}
</style>
